import React, { Component } from 'react'
import RadioShow from './RadioShow';
import CheckBoxShow from './CheckBoxShow';
import SingleTextBox from './SingleTextBox';
import MultilineShow from './MultilineShow';
import { Button } from 'antd';

export default class QuestionContent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isSubmit: false,
            questionResult: []
        }
    }

    handleClick = () => {
        this.setState({
            isSubmit: true
        });
    }

    handleData = (id, value) => {
        let temp = {
            id: id,
            value: value
        }

        let { questionResult } = this.state;

        for (let index = 0; index < questionResult.length; index++) {
            const element = questionResult[index];
            if (element.id === id) {
                return;
            }
        }

        questionResult.push(temp);

        this.setState({
            questionResult
        });
    }

    render() {
        return (
            <div style={{
                backgroundColor: '#efe',
                width: 1200,
                margin: '0 auto'
            }}>
                {
                    // 判断渲染各基本组件
                    this.props.questionContent.map((item, index) => {
                        var temp;
                        switch (item.type) {
                            case 'radio':
                                temp = <RadioShow
                                    key={index}
                                    index={index}
                                    id={item.id}
                                    title={item.title}
                                    options={item.options}
                                    isRequired={item.isRequired}
                                    isSubmit={this.state.isSubmit}
                                    handleData={this.handleData}
                                />
                                break;
                            case 'checkBox':
                                temp = <CheckBoxShow
                                    key={index}
                                    index={index}
                                    id={item.id}
                                    title={item.title}
                                    options={item.options}
                                    isRequired={item.isRequired}
                                    isSubmit={this.state.isSubmit}
                                    handleData={this.handleData}
                                />
                                break;
                            case 'singleText':
                                temp = <SingleTextBox
                                    key={index}
                                    index={index}
                                    id={item.id}
                                    title={item.title}
                                    isRequired={item.isRequired}
                                    isSubmit={this.state.isSubmit}
                                    handleData={this.handleData}
                                />
                                break;
                            case 'multiline':
                                temp = <MultilineShow
                                    key={index}
                                    index={index}
                                    id={item.id}
                                    title={item.title}
                                    isRequired={item.isRequired}
                                    isSubmit={this.state.isSubmit}
                                    handleData={this.handleData}
                                />
                                break;
                            default:
                        }

                        return temp;
                    })
                }
                <Button type="primary" style={{
                    width: 100,
                    height: 40,
                    position: 'relative',
                    left: '50%',
                    marginLeft: -50,
                    marginBottom: 50
                }} onClick={this.handleClick}>提交</Button>
            </div>
        )
    }
}
